<template>
  <div class="chemical-industry-title">
    <div class="chemical-industry-datatimer">
      <div class="chemical-industry-data">
        {{ yearMonthDay }}
        <p>{{ whatDay }}</p>
      </div>
      <div class="chemical-industry-timer">{{ hourMinuteSecond }}</div>
    </div>

    <div style="line-height: 85px; font-size: 42px; font-weight: 700">
      江苏省重点目标作战要素采集系统
    </div>

    <div class="chemical-industry-userext">
      <div class="chemical-industry-user">
        <div style="display: flex">
          <img
            style="width: 42px; height: 42px; margin-top: 20px; margin-right: 23px"
            src="@/assets/image/header/header-person.png"
            alt=""
          />
          <div style="margin-top: 24px">
            <p style="font-size: 20px; font-weight: 700; font-family: 'MicrosoftYaHei'">
              {{ userInfo.xm }}
            </p>
            <p>{{ userInfo.sjjgmc }}</p>
          </div>
        </div>
        <div class="bottom-line"></div>
      </div>
      <div class="chemical-industry-ext" @click="eschandler">
        <div style="width: 36px; height: 36px; margin-left: 60px">
          <img
            v-if="route.path === '/collection'"
            style="width: 100%; height: 100%"
            src="@/assets/image/header/header-home.png"
            alt=""
            @click="cellectBack"
          />
          <img
            v-else
            style="width: 100%; height: 100% padding-left: 29px;"
            src="@/assets/image/header/header-home-back.png"
            alt=""
            @click="homeGoBack"
          />
        </div>
      </div>
    </div>
    <!-- <div v-if="isShowHomeBack" class="homeBack">
      <div style="font-size: 40px; text-align: center; padding-top: 30px">
        <el-icon>
          <InfoFilled />
        </el-icon>
        是否退出系统？
      </div>
      <div style="text-align: center; margin-top: 50px">
        <el-button
          style="background: #909399; color: #fff; border: 1px solid #909399"
          @click="cancelClick"
          >取消</el-button
        >
        <el-button style="color: #000" type="primary" @click="ddetermineClick">确定</el-button>
      </div>
    </div> -->
    <el-dialog v-model="isShowHomeBack" title="Tips" width="580px" :before-close="handleClose">
      <div style="font-size: 40px; text-align: center; padding-top: 30px; color: #fff">
        <el-icon>
          <InfoFilled />
        </el-icon>
        是否退出系统？
      </div>
      <div style="text-align: center; margin-top: 50px">
        <el-button
          style="background: #909399; color: #fff; border: 1px solid #909399"
          @click="cancelClick"
          >取消</el-button
        >
        <el-button style="color: #000" type="primary" @click="ddetermineClick">确定</el-button>
      </div>
    </el-dialog>
    <div v-if="isShowCollectionBack" class="collectionBack">
      <div style="font-size: 40px; text-align: center; padding-top: 30px; margin-bottom: 20px">
        <el-icon>
          <InfoFilled />
        </el-icon>
        是否返回单位目录页？
      </div>
      <div>
        <el-radio-group v-model="radio">
          <div>
            <el-radio label="2">完成单位数据采集，退出</el-radio>
          </div>
          <div>
            <el-radio label="1">未完成单位数据采集，暂存并退出</el-radio>
          </div>
        </el-radio-group>
      </div>
      <div style="text-align: center; margin-top: 40px">
        <el-button
          style="background: #909399; color: #fff; border: 1px solid #909399"
          @click="cellectcancelClick"
          >取消</el-button
        >
        <el-button style="color: #000" type="primary" @click="cellectddetermineClick"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { insertOrUpdateback, queryQycjztInfo } from '@/service/api'
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
const dialogVisible = ref<boolean>(false)
const userInfo = ref({})
const handleClose = (done: () => void) => {
  isShowHomeBack.value = false
}

const route = useRoute()
const store = useChemicalStore()

const hourMinuteSecond = ref()
const yearMonthDay = ref()
const whatDay = ref()
const bsId = ref()
const radio = ref('1')
let timer = null
const isShowHomeBack = ref(false)

const isShowCollectionBack = ref(false)
function timeFormate(timeStamp: any) {
  const year = new Date(timeStamp).getFullYear()
  const month =
    new Date(timeStamp).getMonth() + 1 < 10
      ? '0' + (new Date(timeStamp).getMonth() + 1)
      : new Date(timeStamp).getMonth() + 1
  const date =
    new Date(timeStamp).getDate() < 10
      ? '0' + new Date(timeStamp).getDate()
      : new Date(timeStamp).getDate()
  const hh =
    new Date(timeStamp).getHours() < 10
      ? '0' + new Date(timeStamp).getHours()
      : new Date(timeStamp).getHours()
  const mm =
    new Date(timeStamp).getMinutes() < 10
      ? '0' + new Date(timeStamp).getMinutes()
      : new Date(timeStamp).getMinutes()
  const ss =
    new Date(timeStamp).getSeconds() < 10
      ? '0' + new Date(timeStamp).getSeconds()
      : new Date(timeStamp).getSeconds()
  const week = new Date(timeStamp).getDay()
  const weeks = ['日', '一', '二', '三', '四', '五', '六']
  const getWeek = '星期' + weeks[week]
  hourMinuteSecond.value = hh + ' : ' + mm + ' : ' + ss
  yearMonthDay.value = year + '-' + month + '-' + date
  whatDay.value = getWeek
}
// 启动定时器
function showTimes() {
  timer = setInterval(() => {
    timeFormate(new Date())
  }, 1000)
}
// 销毁定时器
function clearTimer() {
  clearInterval(timer)
}
function homeGoBack() {
  isShowHomeBack.value = true
}
const router = useRouter()

function cellectBack() {
  const params = {
    key: qyId.value,
  }
  queryQycjztInfo(params).then((res) => {
    bsId.value = res
    isShowCollectionBack.value = true
  })
}
const eschandler = () => {
  // router.push({ path: '/home' })
}
//home取消
function cancelClick() {
  isShowHomeBack.value = false
}
//home确定
function ddetermineClick() {
  isShowHomeBack.value = false
  window.localStorage.removeItem('token')
  router.push({ path: '/' })
}
function cellectcancelClick() {
  isShowCollectionBack.value = false
}
const qyId = computed(() => {
  return store.qyInfo.id
})
function cellectddetermineClick() {
  /** 返回home主页移除全部要素 */
  window.GOverlay.removeAll()
  window.GScrollWall.removeAll()
  window.GPoint.removeAll()
  window.GCgsRect.removeAll()

  const params = {
    cjzt: radio.value,
    qyid: qyId.value,
    id: bsId.value ? bsId.value : '',
  }
  insertOrUpdateback(params).then((res) => {
    isShowCollectionBack.value = false
    router.push({ path: '/home' })
  })
}
onMounted(() => {
  //formateRouteForMenuActiveItemFn();

  userInfo.value = JSON.parse(window.localStorage.getItem('userXfjgJyryInfo'))

  timeFormate(new Date())
  showTimes() // 1秒后执行
})
onBeforeUnmount(() => {
  // 在组件销毁前，销毁定时器
  clearTimer()
})
</script>

<style lang="less" scoped>
.chemical-industry-title {
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: rgb(23, 180, 180) !important;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background: rgb(23, 180, 180) !important;
    border-color: rgb(23, 180, 180) !important;
  }
  /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*height:600px;*/
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
  }
  /deep/ .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}

.homeBack {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  height: 210px;
  border-radius: 14px;
  opacity: 0.8;
  background-color: rgba(109, 109, 109, 0.4);
  z-index: 999999;
}
@font-face {
  font-family: 'UnidreamLED';
  src: url(../UnidreamLED/UnidreamLED.eot);
  src: url(../UnidreamLED/UnidreamLED.eot?#iefix) format('embedded-opentype'),
    url('../UnidreamLED/UnidreamLED.woff') format('woff'), local('UnidreamLED'),
    url('../UnidreamLED/UnidreamLED.woff');
}
.collectionBack {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  height: 260px;
  border-radius: 14px;
  background-color: rgba(1, 7, 17, 0.7);
  z-index: 999999999999999 !important;
}
/deep/ .el-radio-group {
  display: block;
  margin-left: 50px;
}
/deep/ .el-button {
  background: #02979b;
  color: #fff;
  border: 1px solid #02979b;
  width: 80px;
  height: 30px;
  border-radius: 10px;
}
/deep/ .el-radio__label {
  font-size: 16px;
}
/deep/ .el-radio {
  color: #fff;
}
::v-deep .el-button {
  color: #fff !important;
}

.chemical-industry-title {
  position: relative;
  width: 100%;
  height: 85px;
  display: flex;
  color: #fff;
  justify-content: space-between;
  background: url('@/assets/image/header/header-bck.png') no-repeat center 10px,
    linear-gradient(
      to right,
      rgba(3, 3, 3, 0.01) 0%,
      rgba(3, 3, 3, 1) 50%,
      rgba(3, 3, 3, 0.01) 100%
    );
  z-index: 10;

  span {
    flex: 1;
    font-size: 50px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .chemical-industry-datatimer {
    width: 30%;
    display: flex;
    text-align: center;

    .chemical-industry-data {
      width: 34%;
      height: 64px;
      color: #fff;
      font-size: 24px;
      margin-top: 20px;
    }

    .chemical-industry-timer {
      width: 39%;
      height: 64px;
      margin-top: 20px;
      font-size: 48px;
      font-family: 'UnidreamLED';
      text-align: left;
    }
  }

  /deep/ .el-dialog {
    border-radius: 14px;
  }

  .chemical-industry-userext {
    width: 30%;
    display: flex;
    padding-right: 30px;
    box-sizing: border-box;

    .chemical-industry-user {
      width: 38%;
      height: 92px;
      margin-left: 32%;

      .bottom-line {
        width: 100%;
        height: 1px;
        margin-top: 5px;
        background-image: url('@/assets/image/header/bottom-line.png');
      }
    }

    /deep/ .chemical-industry-ext {
      width: 30%;
      height: 70px;
      text-align: center;
      padding-top: 28px;
      padding-left: 80px;
      // margin-right: 20px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
</style>
